import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

interface RouteGuardProps {
  children: React.ReactNode
  requireAuth?: boolean // 是否需要登录验证
}

// 不需要登录就可以访问的路由
const publicRoutes = [
  '/login',
  '/zhuce',
  '/auth/gitee/callback'
]

function RouteGuard({ children, requireAuth = true }: RouteGuardProps) {
  const navigate = useNavigate()
  const location = useLocation()
  const [isChecking, setIsChecking] = useState(true)

  useEffect(() => {
    // 如果不需要验证，直接显示内容
    if (!requireAuth) {
      setIsChecking(false)
      return
    }

    // 检查当前路径是否为公开路由
    const isPublicRoute = publicRoutes.some(route => 
      location.pathname === route || location.pathname.startsWith(route)
    )

    // 检查用户是否已登录（通过检查token是否存在）
    const token = localStorage.getItem('token')
    const isLoggedIn = !!token

    // 如果用户未登录且当前不是公开路由，则重定向到登录页
    if (!isLoggedIn && !isPublicRoute) {
      // 保存当前路径，登录后可以跳转回来
      localStorage.setItem('redirectPath', location.pathname)
      navigate('/login', { replace: true })
    } else {
      setIsChecking(false)
    }
  }, [location.pathname, navigate, requireAuth])

  // 如果正在检查登录状态，显示加载状态
  if (isChecking) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '100vh',
        background: '#f5f5f5'
      }}>
        <div style={{ color: '#666', fontSize: 16 }}>正在检查登录状态...</div>
      </div>
    )
  }

  return <>{children}</>
}

export default RouteGuard

